<template>

    <echart :options="option" class="echarts"></echart>

</template>

<style scoped>
.echarts {
  height: 100%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var date = ["08/13", "08/14", "08/15", "08/16", "08/17", "08/18", "08/19"];
var staData = [90, 50, 39, 50, 120, 82, 80];
var allDate = 100;
var fault = 10;
var warning = 16.8;
export default {
  data: function() {
    return {
      option: {
        backgroundColor: "#0D2A42",
        color: ["#00BFFF"],
        title: [
          {
            text: "一周服务运维统计                         ",
            left: "5%",
            top: "1%",
            textStyle: {
              color: "#eedfbe",
            },
            backgroundColor: "#0a3c60"
          }
        ],
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "1%",
          right: "35%",
          top: "16%",
          bottom: "6%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          boundaryGap: false,
          data: date
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#fff"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          },
          type: "value"
        },
        series: [
          {
            smooth: true,
            type: "line",
            symbolSize: 8,
            symbol: "circle",
            data: staData,
            areaStyle: {
              normal: {
                color: "#00CDCD",
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            }
          },
          {
            type: "pie",
            center: ["83%", "33%"],
            radius: ["25%", "30%"],
            label: {
              normal: {
                position: "center"
              }
            },
            data: [
              {
                value: fault,
                itemStyle: {
                  normal: {
                    color: "#ff0000"
                  }
                },
                label: {
                  normal: {
                    formatter: "{d} %",
                    textStyle: {
                      color: "#ff0000",
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: allDate - fault,
                name: "故障",
                tooltip: {
                  show: false
                },
                label: {
                  normal: {
                    textStyle: {
                      color: "#ff0000",
                      fontSize: 20
                    }
                  }
                }
              }
            ]
          },

          {
            type: "pie",
            center: ["83%", "72%"],
            radius: ["25%", "30%"],
            label: {
              normal: {
                position: "center"
              }
            },
            data: [
              {
                value: warning,
                itemStyle: {
                  normal: {
                    color: "#ffb402"
                  }
                },
                label: {
                  normal: {
                    formatter: "{d} %",
                    textStyle: {
                      color: "#ffb402",
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: allDate - warning,
                name: "警告",
                tooltip: {
                  show: false
                },
                label: {
                  normal: {
                    textStyle: {
                      color: "#ffb402",
                      fontSize: 20
                    }
                  }
                }
              }
            ]
          }
        ]
      }
    };
  }
};
</script>
